<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex 布局初识</title>
</head>
<style>
    #parent {
        /*给父盒子添加flex*/
        display: flex;
        /*默认主轴是X轴方向, 可以忽略*/
        flex-direction: row;
        /*设置主轴上子元素排列方式*/
        justify-content: center;
        /*设置侧轴子元素排列方式 （justify-content: center + align-items:center 水平且垂直居中）*/
        align-items: center;
        /*flex布局默认不换行*/
        flex-wrap: wrap;
        /*设置主轴方向和换行 简写*/
        /*flex-flow: column wrap;*/

        width: 50%;
        height: 300px;
        background-color: #00a4ff;
    }

    #parent span {
        width: 150px;
        height: 100px;
        background-color: #8ce6b0;

    }

    #parent span:nth-child(3) {
        /*单独控制某一个子项位置*/
        align-self: self-end;
    }

    section {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: #9bceea;
        margin: 20px auto;
    }

    section div:nth-child(1) {
        width: 100px;
        height: 150px;
        background-color: red;
    }

    section div:nth-child(2) {
        flex: 1;
        background-color: green;
    }

    section div:nth-child(3) {
        width: 100px;
        height: 150px;
        background-color: #c60f2b;
    }

    p {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: #9bceea;
        margin: 0px auto;
    }

    p span {
        flex: 1;
    }

    p span:nth-child(2) {
        flex: 2;
        /*单独调整子项顺序,默认是0*/
        order: -1;
        background-color: #00a4ff;
    }
</style>
<body>
<div id="parent">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>
<p>
    <span>1</span><span>2</span><span>3</span>
</p>

</body>
</html>